<template>
  <el-dialog
    :visible.sync="showBracelet"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    top="20vh !important"
    width="550px"
  >
    <div slot="title"><span>{{ title }}</span><span class="primaryColor ml10 underline pointer" @click="releRecord">{{ $t('message.gljl') }}</span></div>
    <div class="smtip">{{ $t('message.qbshfzcdqs') }}</div>
    <img src="@/icons/png/ic_saomiaob.png" width="200px" height="200px" class="smImg">
    <div class="smFoot">
      <el-input ref="code" v-model="smCode" maxlength="36" :placeholder="$t('message.qbshfzcdqs')" clearable @keyup.enter.native="handleBtn" />
    </div>
  </el-dialog>
</template>

<script>
import store from '@/store'
export default {
  data() {
    return {
      title: this.$t('message.shdk'),
      modalDialog: store.getters.dialog,
      showBracelet: false,
      smCode: ''
    }
  },
  methods: {
    open() {
      this.showBracelet = true
      this.smCode = ''
      this.$nextTick(() => {
        this.$refs.code.focus()
      })
    },
    releRecord() {
      this.showBracelet = false
      this.$router.replace(`/vipList/associationList`)
    },
    handleBtn() {
      if (this.smCode) {
        this.showBracelet = false
        this.$emit('success', this.smCode)
      } else {
        this.$message.info(this.$t('message.qsrzqdshid'))
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.smtip {
  font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 16px;
margin-top: 30px;
text-align: center;
}
.smImg {
  display: block;
  margin: 20px auto 45px;
  width: 200px;
  height: 200px;
}
.smFoot {
  display: flex;
}
</style>
